<template>
  <div id="mainportal" class="container" style="overflow: hidden;background-color: #f5f5f5;">

  <comhead title="会员信息" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>



<div style='background-color:#fff; display: flex;align-items: center;justify-content: center;font-size:14px;padding:10px 0;'>
  <div>
    <img :src="userInfo.iconUrl?userInfo.iconUrl:'https://api-merchant.nanxinwang.com/bapi/upload/20180202/file5a73d36ddb573c3b069f1a4a.jpg'" style="width:60px;height:60px;border-radius: 50px" />
    <div style='text-align:center'>{{userInfo.nickName}}</div>
  </div>

</div>
<div style='height:10px;border-bottom: solid 1px #e5e5e5;border-top: solid 1px #e5e5e5;'>
</div>

<div class='session'>
  <div style=''>
    账号
  </div>
  <div style='flex:1;padding:10px 0 10px 10px;text-align:right;color:#999999'>
    {{userInfo.loginName}}
  </div>
</div>
<!-- 
<picker bindchange="bindPickerSexChange" value="{{sexIndex}}" range="{{sexArray}}">
  <div class='session'>
    <div style=''>
      性别
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;text-align:right'>
      <div class="picker">
        {{sexObjectArray[sexIndex].name}}
      </div>
    </div>
  </div>
</picker> -->


<!-- 
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  <div class='session'>
    <div style=''>
      出生日期
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;text-align:right'>
      <div class="picker">
        {{date?date:'-'}}
      </div>
    </div>
  </div>
</picker> -->

<div style='height:10px;border-bottom: solid 1px #e5e5e5;'>
</div>


 <div class="session">
    <div style=''>
      身份:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;text-align:right'>
      <select v-model="role" @change="changeRole()">
        <option value="OWNER">车主</option>
        <option value="PARTS">配件商</option>
        <option value="REPAIR">修理厂</option>
      </select>
    </div>
  </div>



<div class='session' v-if="$store.getters.getMerchant.seniorMall">
  <div style=''>
    会员等级
  </div>
  <div style='flex:1;padding:10px 0 10px 10px;text-align:right;color:#999999'>
    {{userInfo.typeName}}
  </div>
</div>

<div style="    display: flex;
    justify-content: center;">
<button @click='loginOut' style='background-color:rgb(229, 28, 35);color:#fff;margin:20px 10px;flex: 1;border:1px;'>退出登录</button>
</div>



  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      userInfo: {},
      role: "OWNER"
    };
  },
  computed: {},

  methods: {
    changeRole() {
      let self = this;

      let url = this.$baseUrl.bizUrl + "/user/manager/update";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        role: this.role
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.data.status != 200) {
          MessageBox.alert(res.data.message);
          return;
        }
        Toast("成功");
      };
      this.$reqFormPost(url, data, callBack);
    },

    loginOut() {
      this.$store.commit("setLoginStatus", {});
      let storage = window.localStorage;
      storage.setItem("LoginStatus", "");

      this.$router.replace({
        name: "indexpage",
        query: {
          validcode: storage.appId,
          type: storage.interPage
        }
      });
    },
    getUserInfo() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/user/info";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误1！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误1");
          return;
        }

        if (res.data.status == 200) {
          console.log("用户信息", res.data.data);
          this.userInfo = res.data.data;
          this.role = res.data.data.role;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    document.title ='会员信息'
    this.getUserInfo();
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.session {
  border-bottom: solid 1px #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  background-color: #fff;
  padding: 4px 20px;
}
sign {
}
sign:active {
  opacity: 0.5;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
